import React, { useRef } from "react"
import { Link } from "react-router-dom"

class CustomTextInput extends React.Component {
	constructor(props) {
    super(props)
		this.textInput = React.createRef()
		this.focusTextInput = this.focusTextInput.bind(this)
    this.toHome = this.toHome.bind(this)
	}
	
	focusTextInput() {
		this.textInput.current.focus()
	}
  toHome(props) {
    // props.target.ownerDocument.location.pathname = '/Home'
    // this.props.history.push('/Home')
    // console.log(this.props);
  }
	render() {
		return (
			<div>
				<input type="text" ref={this.textInput} />
				<input type="button" onClick={this.focusTextInput} value="聚焦"/>
        <button onClick={this.toHome}>跳到首页</button>
			</div>
		)
	}
}

function Repeat(props) {
	let items = []
	for (let i = 0; i < props.numTimes; i++) {
		items.push(props.children(i))
	}
	return <div>{items}</div>
}

function ListOfTenThings() {
	return (
		<Repeat numTimes={10}>
			{(index) => <div key={index}>This is item {index} in the list</div>}
		</Repeat>
	)
}

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props)
    this.textInput = React.createRef()
  }

  componentDidMount() {
    this.textInput.current.focusTextInput()
  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />
    )
  }
}
//好用
function CustomTextInputDom(props) {
	const textInput = useRef(null)
	
	function handleClick() {
		textInput.current.focus()
	}
	
	return (
		<div>
			<input type="text" ref={textInput} />
			<input type="button" value="Focus the text input" onClick={handleClick} />
		</div>
	)
}

export default function About(props) {
  function toHome() {
    // props.history.push('/Home')
    console.log(props);
  }

  const FancyButton = React.forwardRef(
    function myFunction(props, ref) {//myFunction为DevTools中的自定义名称
      return (
        <div>
          <a ref={ref} className="FancyButton" href="#/Home">
            {props.children}
          </a>
          <br />
          <Link to={`/Home/123`}>
            {props.children}
          </Link>
          <br />
          <button onClick={toHome} ref={ref}>
            {props.children}
          </button>
          <br />
          <CustomTextInput />
          <br />
          <AutoFocusTextInput />
          <br />
          <CustomTextInputDom />
          <br />
          <ListOfTenThings />
        </div>
      )
    }
  )
  const ref = React.createRef()
  return (
    <>
      <FancyButton ref={ref}>Click it!</FancyButton>
      <div>hhh</div>
    </>
    // <div>About</div>
  )
}